<template>
  <div id='bug-index'>
    <v-header ref="vHeader" title="数据看板" :saveShow="false" :showDownloadBtn="false"></v-header>
    <div class="bug-index-content">
      <!--显示总数的-->
      <div class="tags">
        <v-pageHeader title="应用状态"></v-pageHeader>
      </div>
      <div class="sec-box total-box" v-loading="loading">
        <ul style="border: 1px solid transparent" v-if="bugCountObj">
          <li class="act" v-for="(item, index) in bugCountObj" :key="index" @mouseenter="queryChart(item.exp_type)"
              @mouseleave="resetChart">
            <div class="cont">
              <p v-if="item.exp_type === '0'">异常</p>
              <p v-else-if="item.exp_type === '1'">崩溃</p>
              <p v-else-if="item.exp_type === '2'">卡顿</p>
              <p v-else-if="item.exp_type === '-1'">总计</p>
              <strong> {{ item.counts }}</strong>
            </div>
            <div class="chart" :style="{ background: colors[index] }" @click="toProblem(item.exp_type)">
              <chart :options="option"></chart>
            </div>
          </li>
        </ul>
      </div>
      <!--显示手机应用信息-->
      <div class="tags" style="margin-top: 10px">
        <v-pageHeader title="应用信息"></v-pageHeader>
      </div>
      <div class="sec-box" v-loading="loading1">
        <div class="app-info" style="padding: 20px 0;" v-if="bugAppObj !== null">
          <el-row>
            <el-col :span="2" style="text-align: right">
              应用名称:
            </el-col>
            <el-col :span="22" style="padding-left: 20px">
              {{ bugAppObj.app_name }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" style="text-align: right">
              应用类型:
            </el-col>
            <el-col :span="22" style="padding-left: 20px">
              <span v-if="bugAppObj.app_type === '0'">IOS</span>
              <span v-if="bugAppObj.app_type === '1'">Android</span>
            </el-col>
          </el-row>
<!--          <el-row>
            <el-col :span="2" style="text-align: right">
              所属公司:
            </el-col>
            <el-col :span="22" style="padding-left: 20px">
              {{ bugAppObj.app_own }}
            </el-col>
          </el-row>-->
          <el-row>
            <el-col :span="2" style="text-align: right">
              创建时间:
            </el-col>
            <el-col :span="22" style="padding-left: 20px">
              {{ bugAppObj.app_create_time }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" style="text-align: right">
              App Key:
            </el-col>
            <el-col :span="22" style="padding-left: 20px">
              {{ bugAppObj.app_id }}
            </el-col>
          </el-row>
        </div>
        <div class="no_record" v-else>
          <span>暂无应用信息</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
  import {
    VHeader,
    VPageHeader
  } from './../../components'
  import {nextPage} from '../../assets/js/index'
  import {mixinParams} from '../../assets/js/mixin1'
  import api from '../../api/url'
  import ajax from '../../api/ajax/ajax'
  export default {
    components: {
      VHeader,
      VPageHeader
    },
    mixins: [mixinParams],
    data () {
      return {
        option: {
          grid: {
            show: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#fff',
                opacity: 0.5
              }
            },
            position: function (pos, params, dom, rect, size) {
              return [pos[0] + 10, pos[1] + 10]
            },
            formatter: function (params) {
              return `${params[0].name}：${params[0].value}`
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          lineStyle: {
            color: '#fff'
          },
          series: [{
            data: [],
            type: 'line',
            symbol: 'rect',
            itemStyle: {
              color: '#fff',
              opacity: 0.8
            }
          }]
        },
        bugCountObj: null,
        colors: ['#f3983e', '#ed4134', '#673ab7', '#016DFB'],
        loading: true,
        loading1: true
      }
    },
    watch: {
      appFlag: {
        handler: function (val) {
          if (val) {
            this.updateAppStatus()
            this.appFlag = false
          }
        },
        deep: false
      },
      envFlag: {
        handler: function (val) {
          if (val) {
            this.updateAppStatus()
            this.envFlag = false
          }
        },
        deep: false
      }
    },
    methods: {
      // 切换为当前应用
      updateAppStatus () {
        ajax.post(api.UPDADE_APP_STATUS, {bug_app_id: this.bugAppId}).then(res => {
          this.queryAppInfo()
          this.queryBugCount()
        })
      },
      // 查询应用信息
      queryAppInfo () {
        ajax.post(api.SELECT_APP).then(res => {
          if (res.data && res.data !== '') {
            this.pd_updateBugAppId(res.data.app_id)
            this.pd_updateBugApp(res.data)
            this.loading1 = false
          } else {
            this.pd_updateBugApp(null)
            this.loading1 = false
          }
        })
      },
      // 查询各类型异常数目
      queryBugCount () {
        let params = {
          app_ver: this.versionId,
          exp_types: []
        }
        ajax.post(api.SELECT_BUG_INFO_COUNT, params).then(res => {
          this.bugCountObj = res.data.data_list
          this.loading = false
        })
      },
      // 查询异常折线图
      queryChart (expType) {
        this.queryBugInfoDateChart(expType)
      },
      // 查询异常折线图
      queryBugInfoDateChart (expType) {
        let params = {
          date_type: '1',
          exp_types: [expType]
        }
        ajax.post(api.SELECT_BUG_INFO_DATE_CHART, params).then(res => {
          this.option.xAxis.data = res.data.xaxis
          this.option.series[0].data = res.data.series
        })
      },
      // 重置chart数据
      resetChart () {
        this.option.xAxis.data = []
        this.option.series[0].data = []
      },
      // 跳转到问题页面
      toProblem (expType) {
        nextPage('/home/problem', {expType: expType})
        this.pd_updatePath('/home/problem')
      }
    },
    created () {
      this.$nextTick(() => {
        this.updateAppStatus()
      })
    }
  }
</script>
<style lang='stylus' rel='stylesheet/stylus' type="text/stylus">
  #bug-index
    height 100%
    .bug-index-content
      overflow auto
      height calc(100% - 66px)
      margin 10px 0 0 10px
      padding-right 10px
    .sec-box
      min-height 100px
      background white
    .tool-header
      padding 10px 15px
      height auto !important
      line-height 30px
      background #fff
      margin-bottom 10px
    .tags
      height 51px
      border-bottom 1px solid #d8dce5
      .font12
        padding-left 20px
        font-size 14px
    .total-box
      & > ul, & > button
        box-sizing border-box
        background-color #fff
        min-height 140px
        cursor pointer
      & > ul
        padding 8px
        text-align center
        overflow hidden
        & > li
          float left
          width 25%
          padding 8px
          position relative
          .cont
            height 130px
            background #f2f4f5
            color #5a5e66
            font-size 18px
            p
              line-height 30px
              padding 15px 0
            strong
              font-size 28px
              font-weight normal
          .chart
            position absolute
            left 8px
            bottom 8px
            right 8px
            height 10px
            transition height .3s linear
            cursor pointer
            .echarts
              width 100% !important
              canvas
                width 100% !important
                height 130px !important
                cursor pointer
          &:hover .chart
            height 130px
    .active
      border 1px solid #016DFB !important
    .app-info
      background white
      .el-row
        margin-bottom 0
    .el-col
      font-size 13px
    .el-row
      line-height 35px
    .no_record
      padding 20px
      span
        display block
        line-height 48px
        height 48px
        font-size 14px
        color #999
        text-align center
        position relative
        &:before
          content '\e658'
          display inline-block
          vertical-align top
          height 48px
          font-size 48px
          margin-right 5px
          color #999
          font-family 'iconfont'
</style>
